/**
 * @description 基础饼图
 * @example
 * [{name: 'legend1', value: 'val1'},{name: 'legend2', value: 'val2'},{name: 'legend3', value: 'val3'}]
 * @author gf
 * @todo 在不影响已有功能的情况下可增加props
 */
import React, { useCallback, useState, useEffect, Fragment } from "react";
// import echarts from "echarts/lib/echarts";
// import "echarts/lib/chart/pie";
// import "echarts/lib/component/tooltip";
// import "echarts/lib/component/title";
// import "echarts/lib/component/markPoint";
// import "echarts/lib/component/legend";
// import "echarts/lib/component/legendScroll";
import useIoObserve from "@/hook/useIoObserve";
import * as echarts from "echarts";
import { TOOLTIP_FONT_SIZE } from "@/utils/echarts";
import * as _ from "lodash";

interface obj {
  value: number;
  name: string;
}
interface PieProps {
  legendData?: Array<string>;
  pieData: Array<obj>;
  name: string;
  legendProps?: object;
  pieStyle?: object;
  seriesType?: object;
  formatLen?: number; // legend字符限制长度
  idName: string;
  color?: string[]; //颜色类型数组
  gridProps?: any;
  tooltipProps?: any;
  isPdf?: boolean;
}

const Pie = (props: PieProps) => {
  const [myEcharts, setMyEcharts] = useState({});
  const {
    legendData,
    pieData,
    name,
    idName,
    legendProps,
    pieStyle,
    seriesType,
    formatLen = 6,
    color,
    gridProps,
    tooltipProps,
    isPdf
  } = props;
  // console.log(pieData, legendData, color)

  const getOptions = () => {
    let options = {
      tooltip: {
        trigger: "item",
        formatter: "{b}: {c}%",
        backgroundColor: "rgba(65,69,81,0.96)",
        extraCssText: "border-radius:2px",
        borderWidth: 0,
        textStyle: {
          fontSize: 12,
          color: "#fff",
          lineHeight: "28px",
        },
        ...tooltipProps,
      },
      grid: {
        top: 10,
        // left: '5%',
        left: 0,
        ...gridProps,
      },
      legend: {
        type: isPdf ? "plain" : 'scroll',
        orient: "vertical",
        // x: 'left',
        // selectedMode: false,
        // color: LEGEND_COLOR,
        pageIconSize: 6,
        // pageButtonPosition: 'start',
        top: "20%",
        bottom: 20,
        // width: "14%",
        width: 100,
        itemGap: 20,
        itemHeight: 10,
        itemWidth: 10,
        // borderWidth:0,
        data: legendData,
        formatter: (value) => {
          return value?.length > formatLen
            ? value.substr(0, formatLen) + "..."
            : value;
        },
        textStyle: {
          color: "#35425e",
          fontSize: 10,
          lineHeight: 12,
          padding: [2, 0, 0, 0],
        },

        tooltip: {
          show: true,
          textStyle: {
            fontSize: TOOLTIP_FONT_SIZE,
            color: "#fff",
          },
        },
        inactiveBorderColor: "#fff",
        inactiveBorderWidth: null,
        icon: "circle",
        ...legendProps,
      },
      series: [
        {
          name: name,
          type: "pie",
          radius: ["50%", "70%"],
          width: "80%",
          height: "80%",
          minAngle: 0.0000000001,
          top: "middle",
          ...seriesType,
          ...pieStyle,
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "outside",
          },
          emphasis: {
            label: {
              show: false,
              fontSize: "14",
            },
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "#ffffff",
          },
          labelLine: {
            show: false,
          },
          data: pieData,
        },
      ],
    };
    if (color) {
      options.color = color;
    }
    return options;
  };

  const handleGenPie = () => {
    const dom = document.getElementById(idName);
    const myChart = echarts.init(dom);
    myChart.setOption(getOptions());
    return myChart;
  };

  // 窗口大小改变
  const handleChangeSize = () => {
    setTimeout(() => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      handleGenPie();
    }, 1);
  };
  useIoObserve(null, handleChangeSize, idName);

  useEffect(() => {
    const myEcharts = handleGenPie();
    setMyEcharts(myEcharts);
    window.addEventListener("resize", handleChangeSize);
    return () => {
      const dom = document.getElementById(idName);
      dom?.removeAttribute("_echarts_instance_");
      window.removeEventListener("resize", handleChangeSize);
    };
  }, [JSON.stringify(pieData), legendData]);

  return (
    <div
      id={idName}
      style={{ height: "100%", width: "100%" }}
      onClick={(e) => {
        e.stopPropagation();
      }}
    ></div>
  );
};

export default Pie;
